<template>
    <div class="user">
        <van-nav-bar title="会员主页" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="user-content">
            <section class="user-card">
                <van-row class="user-info">
                    <van-col span="4" offset="2">
                        <div class="user-avatar">
                            <input
                                    id="file"
                                    class="upload"
                                    type="file"
                                    name="image"
                                    accept="image/*"
                                    @change="upload"
                            />
                            <img v-lazy="memberInfo.avatar" alt/>
                        </div>
                    </van-col>
                    <van-col span="11" offset="1">
                        <div>昵称：{{memberInfo.nickname}}</div>
                        <div style="color:#fae7a9">VIP：{{levelName}}</div>
                    </van-col>
                    <van-col span="6">
                        <h3 style="font-size: 20px">MoCity</h3>
                    </van-col>
                </van-row>
                <div class="wallet-card">
                    <van-row style="display: flex;align-items:center;">
                        <van-col offset="1" span="4">
                            <img width="100%" src="../../assets/vip/wallet.png" alt/>
                        </van-col>
                        <van-col offset="1" span="14">
                            <div style="font-size: 18px;">我的钱包</div>
                            <div>余额：{{walletInfo.balance}}</div>
                            <div>积分：{{walletInfo.integral}}</div>
                            <div>股权：{{walletInfo.equity}}</div>
                        </van-col>
                        <van-col class="user-identity" span="4">
                            <div @click="goto('/withdraw')">
                                <span>提现</span>
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </section>
            <div class="card">
                <div class="card-title">收益记录</div>
                <ul class="grid">
                    <li v-for="item in order" :key="item.title">
                        <div @click="goto(item.link)">
                            <img :src="item.image"/>
                            <h3>{{item.title}}</h3>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="card">
                <div class="card-title border">我的服务</div>
                <ul class="grid">
                    <li v-for="item in menu" :key="item.title">
                        <div @click="goto(item.link)">
                            <img :src="item.image"/>
                            <h3>{{item.title}}</h3>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="btn" @click="logout">
                <van-button block round type="danger">退出登录</van-button>
            </div>
        </div>
        <!-- <section class="user-card">
            <van-row class="user-info">
                <van-col span="4" offset="2">
                    <div class="user-avatar">
                        <input
                                id="file"
                                class="upload"
                                type="file"
                                name="image"
                                accept="image/*"
                                @change="upload"
                        />
                        <img v-lazy="memberInfo.avatar" alt/>
                    </div>
                </van-col>
                <van-col span="11" offset="1">
                    <div>昵称：{{memberInfo.nickname}}</div>
                    <div style="color:#fae7a9">VIP：{{memberInfo.levelDesc}}</div>
                </van-col>
                <van-col span="6">
                    <h3 style="font-size: 20px">MoCity</h3>
                </van-col>
            </van-row>
            <div class="wallet-card">
                <van-row style="display: flex;align-items:center;">
                    <van-col offset="1" span="4">
                        <img width="100%" src="../../assets/vip/wallet.png" alt/>
                    </van-col>
                    <van-col offset="1" span="14">
                        <div style="font-size: 18px;">我的钱包</div>
                        <div>余额：{{walletInfo.balance}}</div>
                        <div>积分：{{walletInfo.integral}}</div>
                        <div>股权：{{walletInfo.equity}}</div>
                    </van-col>
                    <van-col class="user-identity" span="4">
                        <div @click="goto('/withdraw')">
                            <span>提现</span>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </section>
        <div class="card">
            <div class="card-title">收益记录</div>
            <ul class="grid">
                <li v-for="item in order" :key="item.title">
                    <div @click="goto(item.link)">
                        <img :src="item.image"/>
                        <h3>{{item.title}}</h3>
                    </div>
                </li>
            </ul>
        </div>
        <div class="card">
            <div class="card-title border">我的服务</div>
            <ul class="grid">
                <li v-for="item in menu" :key="item.title">
                    <div @click="goto(item.link)">
                        <img :src="item.image"/>
                        <h3>{{item.title}}</h3>
                    </div>
                </li>
            </ul>
        </div>
        <div class="btn" @click="logout">
            <van-button block round type="danger">退出登录</van-button>
        </div> -->
    </div>
</template>
<script>
    import {Cell, CellGroup, Row, Col, Popup} from "vant";
    import Croppa from "vue-croppa";
    import api from "@/utils/restful";
    import axios from "axios";

    export default {
        name: "user",
        components: {
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Row.name]: Row,
            [Col.name]: Col,
            [Popup.name]: Popup,
            /* 2020 520 */
            Croppa: Croppa.component
        },
        data() {
            return {
                order: [
                    {
                        title: "收益记录",
                        image: require("../../assets/vip/pay.png"),
                        link: "earningsrecord"
                    },
                    {
                        title: "提现记录",
                        image: require("../../assets/vip/send.png"),
                        link: "withdrawrecord"
                    },
                    {
                        title: "积分记录",
                        image: require("../../assets/vip/receive.png"),
                        link: "integralRecord"
                    },

                    {
                        title: "股权记录",
                        image: require("../../assets/vip/comment.png"),
                        link: "stockrecord"
                    }
                ],
                menu: [
                    {
                        title: "我的订单",
                        image: require("../../assets/vip/collection.png"),
                        link: "viporder"
                    },
                    {
                        title: "客服热线",
                        image: require("../../assets/vip/service.png"),
                        link: "vip"
                    },
                    {
                        title: "收款账户",
                        image: require("../../assets/vip/coin.png"),
                        link: "bankcardlist"
                    },

                    {
                        title: "收货地址",
                        image: require("../../assets/vip/address.png"),
                        link: "addresslist"
                    },
                    {
                        title: "赚钱攻略",
                        image: require("../../assets/vip/strategy.png"),
                        link: "vip"
                    },
                    {
                        title: "好友邀请",
                        image: require("../../assets/vip/friend.png"),
                        link: "invite"
                    },
                    {
                        title: "幸运转盘",
                        image: require("../../assets/vip/qrcode.png"),
                        link: "turntable"
                    },
                    {
                        title: "个人信息",
                        image: require("../../assets/vip/about.png"),
                        link: "setting"
                    }
                ],
                Img: "",
                levelName:"",
                walletInfo: {},
                memberInfo: {},
            };
        },
        mounted() {
            this.getMemberInfo();
            this.getWalletInfo();
        },
        methods: {
            getMemberInfo() {
                this.$axios({
                    method: "get",
                    url: api.memberInfo,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    this.memberInfo = res.data;
                    if (this.memberInfo.memberLevelShow) {
                        this.levelName = this.memberInfo.memberLevelShow.showLevelName;
                    } else {
                        this.levelName = this.memberInfo.levelDesc;
                    }
                });
            },
            getWalletInfo() {
                this.$axios({
                    method: "get",
                    url: api.walletInfo,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    this.walletInfo = res.data;
                });
            },
            upload() {
                let file = document.getElementById("file").files[0];
                console.log(file);
                let formData = new FormData();
                formData.append("imageFile", file);
                const instance = axios.create({
                    withCredentials: true
                });
                instance
                    .post("http://localhost:8080/image/upload.do", formData)
                    .then(res => {
                        console.log(res.data);
                        if (res.data.code == 200) {
                            this.changeAvatar(res.data.data);
                        }
                    });
            },
            changeAvatar(avatar) {
                this.$axios({
                    method: "post",
                    url: api.changeAvatar,
                    params: {
                        token: localStorage.getItem("token"),
                        avatar: avatar
                    }
                }).then(res => {
                    this.getMemberInfo();
                });
            },
            goto(name) {
                if (name == "paymentcode"){
                    this.$toast("目前系统全面支持在线支付，该功能酌情开放");
                } else {
                    this.$router.push({path: name});
                }
            },
            logout() {
                localStorage.removeItem("token");
                this.$router.replace({path: "/login"});
            },
            backUp() {
                this.$router.replace({path: "/"});
            }
        }
    };
</script>
<style lang="less" scoped>
    // @import "~style/user.less";
    @import "~style/common.less";

    .user {
        background-color: #fff;
        /* 2020 520 修改样式 */
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    /* 2020 520 添加新类 */
    .user-content {
        flex-grow: 1;
        overflow: scroll;
    }

    .user-card {
        background-color: #000;
        padding: 10px;
        font-size: 14px;
        line-height: 2;
        color: #fff;
        position: relative;
        z-index: 1;

        .user-avatar {
            position: relative;
            width: 56px;
            height: 56px;
            margin: 0 auto;
            font-size: 0;
            line-height: 0;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.66);
            position: relative;
            overflow: hidden;

            .upload {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }

            img {
                width: 100%;
                height: auto;
            }
        }

        .user-identity {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            color: #fff;
            opacity: 0.8;
            background-color: #ecd296;
            border-radius: 20px 0 0 20px;
        }
    }

    .wallet-card {
        position: relative;
        padding: 10px;
        padding-right: 0;
        margin: 30px 0 10px 0;
        height: 120px;
        background-color: #fff;
        border-radius: 5px 5px 20% 20%;
        color: #000;
    }

    .card {
        margin: 15px;
        margin-bottom: 30px;
        background-color: #fff;
        border: 1px solid #eee;
        box-shadow: 0px 5px 5px #e7e7e7;
        border-radius: 5px;

        .card-title {
            padding: 5px 20px;
            .font-dpr(18px);
        }
    }

    .border {
        border-bottom: 1px solid #eee;
    }

    .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;
        background-color: @bgColor;
        margin: 0 auto;

        li {
            flex-basis: 25%;
            padding: 10px;
            box-sizing: border-box;
        }

        img {
            height: 48px;
            width: 48px;
            border-radius: 50%;
        }

        h3 {
            .font-dpr(12px);
            color: @fontColorP;
            font-weight: 400;
            line-height: 2;
        }
    }

    .withdraw-btn {
        padding: 1px 10px;
        opacity: 0.5;
        color: #fff;
        background-color: rgb(151, 135, 108);
        border-radius: 20px;
    }

    .van-pull-refresh {
        min-height: 14.425rem;
    }

    .van-list__loading-text {
        font-size: 0.75rem;
    }

    .van-list__finished-text {
        font-size: 0.75rem;
    }

    .btn {
        padding: 0 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>
